<template>
  <div>
    <h3>detail:{{ type }}</h3>
  </div>
</template>

<script lang="ts">
  import { defineComponent } from "vue";
  export default defineComponent({
    name: "Detail",
  });
</script>
<script lang="ts" setup>
    import { useRoute } from "vue-router";
    import { computed } from "vue";

    /*
    useRoute
      返回当前路由地址。相当于在模板中使用 $route。必须在 setup() 中调用。
      只要动态路由参数发生改变,route对象就会随之改变
  */
    const route = useRoute();
    // const type = route.params.type;

   //动态的获取动态路由参数
    const type = computed(() => {
      return route.params.type;
    });

    watch(route,()=>{
      console.log('route改变了'，route.params.type)
    })
</script>

<style lang="scss" scoped></style>
